/*---- 兼容webkit 内核的滚动条样式 -----*/
/*  默认滚动条样式修改 begin */
body::-webkit-scrollbar,
div::-webkit-scrollbar,
ul::-webkit-scrollbar,
section::-webkit-scrollbar,
tbody::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 6px;
  height: 0;
  background-color: transparent;
}

/* dialog 滚动条0 */
.el-overlay-dialog::-webkit-scrollbar {
  width: 0px;
}

/* 外层轨道 */
body::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
ul::-webkit-scrollbar-track,
section::-webkit-scrollbar-track,
tbody::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  border-radius: 4px;
}

/* 内层轨道 */
body::-webkit-scrollbar-track-piece,
div::-webkit-scrollbar-track-piece,
ul::-webkit-scrollbar-track-piece,
section::-webkit-scrollbar-track-piece,
tbody::-webkit-scrollbar-track-piece,
textarea::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

/* 滚动的滑块 */
body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb,
tbody::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba($color: #000000, $alpha: 0.25);
}

body:hover::-webkit-scrollbar-thumb,
div:hover::-webkit-scrollbar-thumb,
ul:hover::-webkit-scrollbar-thumb,
section:hover::-webkit-scrollbar-thumb,
tbody:hover::-webkit-scrollbar-thumb,
textarea:hover::-webkit-scrollbar-thumb {
  background: rgba($color: #000000, $alpha: 0.25);
}

/* cursor 鼠标形状
------------------------------- */
// 默认
.cursor-default {
  cursor: default !important;
}
// 帮助
.cursor-help {
  cursor: help !important;
}
// 手指
.cursor-pointer {
  cursor: pointer !important;
}
// 移动
.cursor-move {
  cursor: move !important;
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

/* nprogress 进度条跟随主题颜色
------------------------------- */
#nprogress {
	.bar {
		background: var(--color-primary) !important;
		z-index: 9999999 !important;
	}
}


.flex-wrap {
  display: flex;
}

.flex-align-center {
  @extend .flex-wrap;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column-center {
  @extend .flex-center;
  flex-direction: column;
}